import React, { Component } from "react";
import { Card, Button, Icon, Radio } from "antd";

import "./ui.scss";

const ButtonGroup = Button.Group;
const RadioGroup = Radio.Group;
class buttons extends Component {
  constructor(props) {
    super(props);

    this.state = {
      size: "default"
    };
  }

  render() {
    return (
      <div>
        <Card title="基础按钮">
          <Button type="primary">XinHua</Button>
          <Button>XinHua</Button>
          <Button type="dashed">XinHua</Button>
          <Button type="danger">XinHua</Button>
          <Button disabled>XinHua</Button>
        </Card>
        <Card title="图形按钮">
          <Button icon="plus">创建</Button>
          <Button icon="edit">编辑</Button>
          <Button icon="delete">删除</Button>
          <Button icon="search" shape="circle"></Button>
          <Button type="primary" icon="search">
            搜索
          </Button>
          <Button type="primary" icon="download">
            下载
          </Button>
        </Card>
        <Card title="Loading按钮">
          <Button type="primary" loading>
            Loading
          </Button>
          <Button type="primary" size="small" loading>
            Loading
          </Button>
          <Button type="primary" loading />
          <Button type="primary" shape="circle" loading />
          <Button type="danger" shape="round" loading />
        </Card>
        <Card title="组合按钮">
          <ButtonGroup>
            <Button
              style={{ marginRight: "0px" }}
              type="primary"
              icon="cloud"
            />
            <Button type="primary" icon="cloud-download" />
          </ButtonGroup>
          <ButtonGroup>
            <Button
              style={{ marginRight: "0px" }}
              type="primary"
              size="small"
              icon="cloud"
            />
            <Button type="primary" size="small" icon="cloud-download" />
          </ButtonGroup>
          <ButtonGroup>
            <Button style={{ marginRight: "0px" }} type="primary">
              <Icon type="left" />
              后退
            </Button>
            <Button type="primary">
              前进
              <Icon type="right" />
            </Button>
          </ButtonGroup>
        </Card>
        <Card title="按钮尺寸">
          <RadioGroup value={this.state.size} onChange={this.handleChange}>
            <Radio value="small">小</Radio>
            <Radio value="default">中</Radio>
            <Radio value="large">大</Radio>
          </RadioGroup>
          <Button size={this.state.size} type="primary">
            XinHua
          </Button>
          <Button size={this.state.size} type="dashed">
            XinHua
          </Button>
          <Button size={this.state.size} type="danger">
            XinHua
          </Button>
        </Card>
      </div>
    );
  }
  handleChange = e => {
    this.setState({
      size: e.target.value
    });
  };
}

export default buttons;
